<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <form class="form">
    <input type="text" name="tName">
    <input type="text" name="tel">
    <input type="text" name="number">
    <input type="file" name="tImg">
    <input type="date" name="date">
  </form>

  <input type="button" value="发送" class="btn">
</body>
<script>

  // 使用XMLHttpRequest同时发送文件和文本数据

  const btn = document.querySelector(".btn");
  const form = document.querySelector(".form");

  btn.onclick = function(){
    // 将整个表单的所有输入框打包成表单数据，发送到后端
    const fd = new FormData(form);
    ajax("http://localhost:3000/upload", fd, (res)=>{
      console.log(res);
    })
  }


  function ajax(url, data, success){
    const xhr = new XMLHttpRequest();
    xhr.open("post", url, true);
    // 不需要设置content-type
    // 将formData数据直接传给send即可
    xhr.send(data);
    xhr.onload = function(){
      if(xhr.status === 200){
        success(xhr.responseText);
      }
    }
  }


</script>
</html>